<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4">
      <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 border-b border-gray-100">
          <h2 class="text-2xl font-semibold text-gray-800">JSON 转 Record 工具</h2>
          <p class="mt-2 text-gray-600">将 JSON 数据结构转换为 4GL Record 格式，支持嵌套结构</p>
        </div>

        <div class="p-6">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- JSON 输入区域 -->
            <div class="space-y-4">
              <div class="flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-700">JSON 输入</h3>
                <div class="space-x-2">
                  <button 
                    @click="formatJSON" 
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200"
                  >
                    <i class="ri-code-line mr-1"></i> 格式化
                  </button>
                  <button 
                    @click="clearJSON" 
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors duration-200"
                  >
                    <i class="ri-delete-bin-line mr-1"></i> 清空
                  </button>
                </div>
              </div>
              <div class="relative">
                <textarea
                  v-model="jsonInput"
                  placeholder="请输入 JSON 数据..."
                  class="w-full h-[500px] p-4 text-sm font-mono bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                ></textarea>
              </div>
            </div>

            <!-- Record 输出区域 -->
            <div class="space-y-4">
              <div class="flex justify-between items-center">
                <h3 class="text-lg font-medium text-gray-700">Record 输出</h3>
                <div class="space-x-2">
                  <button 
                    @click="copyToClipboard" 
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors duration-200"
                  >
                    <i class="ri-file-copy-line mr-1"></i> 复制
                  </button>
                  <button 
                    @click="convertToRecord" 
                    class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 transition-colors duration-200"
                  >
                    <i class="ri-arrow-right-line mr-1"></i> 转换
                  </button>
                </div>
              </div>
              <div class="relative">
                <pre
                  class="w-full h-[500px] p-4 text-sm font-mono bg-gray-50 border border-gray-200 rounded-lg overflow-auto whitespace-pre-wrap"
                >{{ recordOutput }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const jsonInput = ref('')
const recordOutput = ref('')

const generateIndent = (level) => {
  return '    '.repeat(level)
}

const parseValue = (value, level = 0) => {
  if (Array.isArray(value)) {
    return 'DYNAMIC ARRAY OF ' + parseValue(value[0] || {}, level)
  } else if (typeof value === 'object' && value !== null) {
    let result = 'RECORD\n'
    
    Object.entries(value).forEach(([key, val], index, arr) => {
      const indent = generateIndent(level + 1)
      result += `${indent}${key} `
      
      if (typeof val === 'object' && val !== null) {
        result += parseValue(val, level + 1)
      } else {
        result += 'STRING'
      }
      
      if (index < arr.length - 1) {
        result += ','
      }
      result += '\n'
    })
    
    result += `${generateIndent(level)}END RECORD`
    return result
  } else {
    return 'STRING'
  }
}

const convertToRecord = () => {
  try {
    const jsonData = JSON.parse(jsonInput.value)
    let result = ''
    
    if (Array.isArray(jsonData)) {
      result = 'TYPE item ' + parseValue(jsonData)
    } else {
      result = parseValue(jsonData)
    }
    
    recordOutput.value = result
    ElMessage.success('转换成功')
  } catch (error) {
    recordOutput.value = '错误: 请检查JSON格式是否正确\n' + error.message
    ElMessage.error('JSON 格式错误')
  }
}

const formatJSON = () => {
  try {
    const parsed = JSON.parse(jsonInput.value)
    jsonInput.value = JSON.stringify(parsed, null, 2)
    ElMessage.success('格式化成功')
  } catch (error) {
    ElMessage.error('JSON 格式错误')
  }
}

const clearJSON = () => {
  jsonInput.value = ''
  recordOutput.value = ''
  ElMessage.info('已清空')
}

const copyToClipboard = async () => {
  try {
    await navigator.clipboard.writeText(recordOutput.value)
    ElMessage.success('已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}
</script>

<style scoped>
/* 自定义滚动条样式 */
pre, textarea {
  scrollbar-width: thin;
  scrollbar-color: #E5E7EB transparent;
}

pre::-webkit-scrollbar,
textarea::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

pre::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track {
  @apply bg-transparent;
}

pre::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb {
  @apply bg-gray-200 rounded-full;
}

pre::-webkit-scrollbar-thumb:hover,
textarea::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-300;
}
</style> 